<template>
  <div class="person-main-box">
    <div>
      <PageFoot :activeProps="active" />
    </div>
    <div class="person-info-box">
      <img class="head-img-box" :src="headUrl" />
      <div class="user-name-box">
        {{ this.$store.state.user.userName || this.$store.state.user.dingName }}
      </div>
    </div>
  </div>
</template>

<script>
import PageFoot from "@/components/PageFoot.vue";
export default {
  components: {
    PageFoot,
  },
  data() {
    return {
      active: 4,
      headUrl: this.$store.state.user.userHeadImgUrl
        ? this.$store.state.user.userHeadImgUrl
        : this.$store.state.user.dingUserInfo.avatar,
      userName: this.$store.state.user.userName,
    };
  },
};
</script>

<style lang="scss" scoped>
.person-main-box {
  /* border: 1px solid red; */
  height: 87vh;
  width: 99vw;
  overflow: auto;

  .person-info-box {
    text-align: center;
    .head-img-box {
      display: inline-block;
      margin-top: 50px;
      /* border: 1px solid blue; */
      width: 50px;
      height: 50px;
      /* border: 1px solid green; */
      border-radius: 50px;
    }
    .user-name-box {
      /* border: 1px solid blue; */
      height: 50px;
      line-height: 50px;
      width: 100%;
    }
  }
}
</style>